<template>
  <el-header height="">
    <el-row class="header" :gutter="20">
      <!-- 首页 -->
      <el-col :span="6">
        <div class="">
          <el-button type="text" style="font-size: 150%">首页</el-button>
        </div>
      </el-col>

      <el-col :span="12">
        <el-button type="text" style="font-size: 150%">没取好名字</el-button>
      </el-col>

      <!-- 个人选项菜单 -->
      <el-col :span="6">
        <el-dropdown>
          <div class="header-right">
            <el-avatar>
              <img src="../assets/头像2.png" alt />
            </el-avatar>
            <span style="font-size: 150%">用户名</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-edit">修改密码</el-dropdown-item>
            <el-dropdown-item icon="el-icon-s-fold">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
export default {
  name: "MyHeader",
  data() {
    return {
      avaterSrc: "https://s1.imagehub.cc/images/2022/05/27/2.png",
    };
  },
};
</script>

<style lang="css">
.header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  text-align: center;
  margin: center;
}
.headerText {
  font-size: 20px;
}
</style>
 